<!DOCTYPE html>
<html ng-app="app" flow-init>
<head>
  <title>Download url</title>
  <script src="../../bower_components/angular/angular.js"></script>
  <script src="../../dist/ng-flow-standalone.js"></script>
  <script src="app.js"></script>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
        rel="stylesheet"/>
</head>
<body flow-prevent-drop
      flow-drag-enter="style={border: '5px solid green'}"
      flow-drag-leave="style={}"
      ng-style="dropEnabled && style">
<div class="container">
  <h1>Flow drag & drop and drop to desktop feature</h1>
  <h2>Chrome browser only</h2>
  <hr class="soften"/>

  <div class="alert" flow-drop flow-drag-enter="class='alert-success'" flow-drag-leave="class=''" ng-class="dropEnabled && class"
       flow-drop-enabled="dropEnabled"
       style="text-align: center; padding: 100px 0;" >
    Drag And Drop your file here<br/>
    <a class="btn btn-default"
       draggable="true"
       app-dragstart="dropEnabled=false"
       app-dragend="dropEnabled=true"
       app-download-url="{name:'flow.png', mime: 'image/png', url: 'flow.png'}">
        Drag "flow.png" to desktop
    </a>
  </div>

  <ul>
    <li ng-repeat="file in $flow.files">{{file.name}}</li>
  </ul>
</div>
</body>
</html>